<!-- PC 浏览器打开App时手机风格包装页面 -->

<html>

	<head>
		<link rel="shortcut icon" type="image/x-icon" href="https://cdn.pulanit.com/pangu-app-starter/favicon.ico">
		<title>盘古移动端多平台快速开发脚手架（盘古开发框架旗下生态项目）</title>
	</head>
	<!--The Main Thing-->
	<div id="wrapper">
		<div class="phone view_3" id="phone_1">
			<iframe src="https://pangu-app-starter.pulanit.com/" id="frame_1"></iframe>
		</div>
	</div>

	<!--Controls etc.-->
	<div id="controls">


	</div>
	<div id="linkBack"
		style="position:absolute;right:0px;bottom:0px;background-color:#333;margin:0;width:70px;padding:5px">
		<a href="https://pangu-app-starter.pulanit.com" target="_blank"
			style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:sans-serif">原始视图</a>
	</div>

</html>

<script>
	var phone = document.getElementById("phone_1");
	phone.style.width = "380px";
	phone.style.height = document.body.clientHeight - 125;
	
	function isPhone() {
		var ua = navigator.userAgent;
		return /mobile/i.test(ua);
	}

	function isWeiXin() {
		var ua = navigator.userAgent.toLowerCase();
		return ua.indexOf('micromessenger') != -1;
	}
	
	window.onload = function() {
		if (isPhone() || isWeiXin()) {
			window.location.href = "https://pangu-app-starter.pulanit.com";
		}
	}
</script>

<style>
	body {
		font-family: 'Open Sans', sans-serif;
		background-color: #ffffff;
	}

	/*Basic Phone styling*/

	.phone {
		border: 40px solid #ddd;
		border-width: 55px 7px;
		border-radius: 40px;
		margin: 0px auto;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.phone iframe {
		border: 0;
		width: 100%;
		height: 100%;
	}


	.phone.view_3 {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #666;
	}
</style>
